import VueRouter from 'vue-router';
<template>
	<div class="content" @click="clickCell">
		<div class="border">
			<div class="top sb flex ac">
				<Avatar style="background-color: #87d068" icon="ios-person" />
				<Icon type="ios-more-outline" />
			</div>
			<div style="margin: 40px 0">
				<img src="../imgs/unnamed.gif" alt="" srcset="" />
			</div>
			<div class="bottom">
				<h3>Transmutation</h3>
				<b> 非卖品</b>
				<b> 1of1</b><br />
				<div class="felx sb ">
					<b> Place a bid</b>
					<Icon type="ios-heart-outline" style="float:right" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	methods: {
		clickCell() {
			this.$router.push('/detail');
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
	padding: 15px;
}

.border {
	border: #ddd 1px solid;
	height: 400px;
	width: 100%;
	border-radius: 10px;
	padding: 15px;
}

.top {
	height: 20px;
}

img {
	width: 100%;
	height: 100%;
}
</style>
